<template>
    <div class="min-h-screen bg-gray-40 p-8">
      <div class="mx-auto max-w-7xl bg-white rounded-lg shadow-sm">
        <div class="p-6">
          <div class=" mx-auto py-8">
            <div class="space-y-6">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="完成した" name="first">
                  <el-table :data="tableData" empty-text="データなし">
                    <el-table-column align="center"  label="番号" width="400">
                      <template slot-scope="scope">
                        {{ scope.$index+1  }}
                      </template>
                    </el-table-column>
                    <el-table-column align="center" prop="category_name" label="カテゴリー" width="400">
                    </el-table-column>
                    <el-table-column align="center" label="完成時間" width="400">
                      <template slot-scope="scope">
                        {{ getTime(scope.row.updated_at) }}
                      </template>
                    </el-table-column>
                    <el-table-column align="center" prop="score" label="得点" width="100">
                    </el-table-column>
                    <el-table-column align="center" prop="address" label="操作">
                      <template slot-scope="scope">
                        <el-button type="primary" @click="viewDetail(scope.row)">詳細</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="px-6 py-4 flex items-center justify-between border-t">
  
                    <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage"
                      :page-size.sync="pageSize" :total="total" :page-sizes="[10, 20, 30, 40]"
                      layout="prev, pager, next" />
                  </div>
                </el-tab-pane>
                <el-tab-pane label="個別化練習" name="second" >
                  <el-table :data="tableData2" empty-text="データなし">
                    <el-table-column align="center"  label="番号" width="400">
                      <template slot-scope="scope">
                        {{ scope.$index+1  }}
                      </template>
                    </el-table-column>
                    <el-table-column align="center" prop="category_name" label="カテゴリー" width="400">
                    </el-table-column>
                    <el-table-column align="center"  label="操作">
                      <template slot-scope="scope">
                        <el-button type="primary" @click="start(scope.row)">問題解答</el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.id)"></el-button>
                      </template>
                     
                    </el-table-column>
                  </el-table>
                  <div class="px-6 py-4 flex items-center justify-between border-t">
                    <el-pagination @current-change="handleChange" :current-page.sync="currentPage1" background
                      :page-size.sync="pageSize" :total="total" :page-sizes="[10, 20, 30, 40]"
                      layout="prev, pager, next" />
                  </div>
                </el-tab-pane>
              </el-tabs>
  
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import tiemUtil from "@/utils/timeUtil"
  
  import { get } from "@/http/axios";
  export default {
    data() {
      return {
        activeName: 'first',
        tableData: [],
        currentPage: 1,
        currentPage1:1,
        pageSize: 10,
        tableData2: [],
        total: 0
      }
    },
    async mounted() {
      await this.getSuccesList(1)
    },
    methods: {
      start(row){
        if(this.$route.query.flag){
          this.$router.push({ path: "/exercise", query: { branch_id: row.branch_id,id: row.category_id,user_question:true} })
        }else{
            this.$router.push({ path: "/exercise", query: { branch_id: row.branch_id,id: row.category_id,next:true,user_question:true} })
        }
       
      },
      viewDetail(row) {
        this.$router.push({ path: "/suceesUserView", query: { branch_id: row.branch_id } })
      },
      getTime(date) {
        return tiemUtil(date)
      },
      async handleClick(tab, event) {
        if (tab.index == 0) {
          await this.getSuccesList(this.currentPage)
        } else {
          await this.getList(this.currentPage1)
        }
      },
      async handleCurrentChange(val) {
        await this.getSuccesList(val)
      },
      async handleChange(val) {
        await this.getList(val)
      },
      async del(id){
        let data = await get(`/del_fil_user_list?id=${id}`)
      if (data.data.code == "success") {
        this.$message({
          message: '削除完了',
          type: 'success'
        });
        await this.getList(this.currentPage1)
      }
      },
      async getList(pageNum) {
        const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
        let data = await get(`/fil_user_list?current_page=${pageNum}`)
        loading.close()
        this.tableData2 = data.data.data.list
        this.total = data.data.data.paginator.total_record
        this.currentPage1 = data.data.data.paginator.current_page
      },
      async getSuccesList(pageNum) {
        const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
        let data = await get(`/sucees_user_list?current_page=${pageNum}`)
        loading.close()
        this.tableData = data.data.data.list
        this.total = data.data.data.paginator.total_record
        this.currentPage = data.data.data.paginator.current_page
      }
    }
  }
  </script>